<template>
  <div>
    <el-form
      class="screening-form"
      :label-position="labelPosition"
      label-width="80px"
    >
      <div class="filter-container2">
        <el-row :gutter="20">
          <el-col :span="6">
            <el-form-item label="学科">
              <el-select
                class="filter-item"
                style="width: 100%"
                v-model="screeningForm.subjectID"
                @change="handleSecondaryDirectoryList"
              >
                <el-option
                  v-for="item in subjectsSimpleList"
                  :key="item.value"
                  :value="item.value"
                  :label="item.label"
                />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="二级目录">
              <el-select
                class="filter-item"
                style="width: 100%"

                v-model="screeningForm.catalogID"
              >
                <el-option
                  v-for="(item,index) in catalogList"
                  :key="index"
                  :value="index"
                  :label="item.label"
                />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="标签">
              <el-select
                class="filter-item"
                style="width: 100%"
                v-model="screeningForm.tags"
              >
                <el-option
                  v-for="(item, index) in subjectLabelList"
                  :key="index"
                  :value="item.value"
                  :label="item.label"
                />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="关键字">
              <el-input
                class="filter-item"
                style="width: 100%"
                v-model="screeningForm.keyword"
              />
            </el-form-item>
          </el-col>
        </el-row>
      </div>

      <div class="filter-container2">
        <el-row :gutter="20">
          <el-col :span="6">
            <el-form-item label="试题类型">
              <el-select
                class="filter-item"
                style="width: 100%"
                v-model="screeningForm.questionType"
              >
                <el-option
                  v-for="(item, index) in questionTypeList"
                  :key="index"
                  :value="item.value"
                  :label="item.label"
                />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="难度">
              <el-select
                class="filter-item"
                style="width: 100%"
                v-model="screeningForm.difficulty"
              >
                <el-option
                  v-for="(item, index) in difficultyList"
                  :key="index"
                  :value="item.value"
                  :label="item.label"
                />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="方向">
              <el-select
                class="filter-item"
                style="width: 100%"
                v-model="screeningForm.direction"
              >
                <el-option
                  v-for="(item, index) in directionList"
                  :key="index"
                  :value="index"
                  :label="item"
                />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="录入人">
              <el-select
                class="filter-item"
                style="width: 100%"
                v-model="screeningForm.creatorID"
              >
                <el-option
                  v-for="item in userList"
                  :key="item.id"
                  :value="item.id"
                  :label="item.username"
                />
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
      </div>

      <div class="filter-container2">
        <el-row :gutter="20">
          <el-col :span="6">
            <el-form-item label="题目备注">
              <el-input
                class="filter-item"
                style="width: 100%"
                v-model="screeningForm.remarks"
              />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="企业简称">
              <el-input
                class="filter-item"
                style="width: 100%"
                v-model="screeningForm.shortName"
              />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="城市">
              <el-select
                class="filter-item"
                style="width: 49%; float: left"
                v-model="screeningForm.provinces"
                @change="handleCity"
              >
                <el-option
                  v-for="(item, index) in provincesList"
                  :key="index"
                  :value="item"
                  :label="item"
                />
              </el-select>

              <el-select
                class="filter-item"
                style="width: 49%"
                v-model="screeningForm.city"
              >
                <el-option
                  v-for="(item, index) in cityList"
                  :key="index"
                  :value="index"
                  :label="item"
                />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-button
              style="float: right; margin-left: 15px"
              type="primary"
              size="small"
              @click="handleSearch"
            >搜索</el-button>
            <el-button style="float: right" size="small" @click="handleClear">清除</el-button>
          </el-col>
        </el-row>
      </div>
    </el-form>
  </div>
</template>

<script>

import { simple } from '@/api/hmmm/subjects.js'
import { tagSimple } from '@/api/hmmm/tags.js'
import { directorySimple } from '@/api/hmmm/directorys.js'
import { questionType, difficulty, direction } from '@/api/hmmm/constants'
import { list } from '@/api/base/users'
import { provinces, citys } from '@/api/hmmm/citys'
export default {
  name: 'Screening',
  data () {
    return {
      labelPosition: 'right', // 筛选区对齐
      subjectsSimpleList: [], // 简单学科列表
      catalogList: [], // 二级目录列表
      subjectLabelList: [], // 学科标签列表
      questionTypeList: [], // 试题类型
      difficultyList: [], // 难度
      directionList: [], // 方向
      userList: [], // 用户列表
      provincesList: [], // 省份列表
      cityList: [], // 城市下的区域
      // 搜索列表
      screeningForm: {
        subjectID: '', // 简单学科列表
        catalogID: '', // 二级目录
        tags: '', // 学科标签
        keyword: '', // 关键字
        questionType: '', // 试题类型
        difficulty: '', // 难度
        direction: '', // 方向
        creatorID: '', // 录入人
        remarks: '', // 题目备注
        shortName: '', // 公司简称
        provinces: '', // 省份列表
        city: '' // 城市下的区域
      }
    }
  },
  created () {
    this.getSubjectsSimpleList()
    this.getUserList()
    this.questionTypeList = questionType // 试题类型
    this.difficultyList = difficulty // 难度
    this.directionList = direction // 方向
    this.provincesList = provinces() // 城市
  },
  methods: {
    // 简单学科列表
    async getSubjectsSimpleList () {
      const res = await simple()
      this.subjectsSimpleList = res.data
    },
    // 用户列表
    async getUserList () {
      const res = await list()
      const { list: userList } = res.data
      this.userList = userList
    },
    // 获取城市下区域
    handleCity () {
      const cityList = citys(this.screeningForm.provinces)
      this.cityList = cityList
    },
    // 获取二级目录和标签
    async handleSecondaryDirectoryList () {
      // 二级目录
      const res = await directorySimple({
        subjectID: this.screeningForm.subjectID
      })
      this.catalogList = res.data

      // 标签
      const resTags = await tagSimple({ subjectID: this.screeningForm.subjectID })

      this.subjectLabelList = resTags.data
    },
    // 搜索
    handleSearch () {
      this.$emit('handleSearch', this.screeningForm)
    },
    // 清除
    handleClear () {
      this.screeningForm = {}
    }
  }
}
</script>

<style scoped lang="scss">
/* @import url(); 引入css类 */
.bg-purple {
  color: pink;
  font-size: 12px;
}

.bg-purple-light {
  background: #e5e9f2;
}
.grid-content {
  border-radius: 4px;
  min-height: 36px;
}
.filter-item {
  float: right;
}
.filter-container2 {
  margin-top: 0;
  margin-bottom: 0;
}
</style>
